<template>
	<div class="container">
<!--		<div class="plugins-tips">设置权限需重新</div>-->
		<div class="mgb20">
			<span class="label">角色：</span>
			<el-select v-model="role" @change="handleChange">
				<el-option label="客户" value="1"></el-option>
				<el-option label="公司管理员" value="2"></el-option>
				<el-option label="系统管理员" value="3"></el-option>
			</el-select>
		</div>
		<div class="mgb20 tree-wrapper">
			<el-tree
				ref="tree"
				:data="data"
				node-key="id"
				show-checkbox
				@check="handleCheck"
				check-strictly="true"
				:default-checked-keys="checkedKeys"
			/>
		</div>
		<el-button type="primary" @click="onSubmit" style="margin-left: 25px">保存权限</el-button>
	</div>
</template>

<script setup lang="ts" name="permission">
import { ref } from 'vue';
import {ElMessage, ElTree } from 'element-plus';
import { usePermissStore } from '../store/permiss';
import {getResourceListByRoleApi, updateRoleResource} from "../api/index";

const role = ref<string>('1');

interface Tree {
	id: string;
	label: string;
	children?: Tree[];
}

const data : Tree[] = [
	{
		id: '1',
		label: '数据大屏'
	},
	{
		label: '用户管理',
		id: '2',
		children: [
			{
				label: '新增用户',
				id: '12',
			},
			{
				label: '编辑用户',
				id: '13',
			}
		],
	},
	{
		label: '公司管理',
		id: '3',
		children: [
			{
				label: '新增公司',
				id: '14',
			},
			{
				label: '编辑公司',
				id: '15',
			}
		],
	},
	{
		label: '订单管理',
		id: '4',
		children: [
			{
				label: '公司接单',
				id: '21',
			},
			{
				label: '用户付款',
				id: '22',
			},
			{
				label: '取消',
				id: '23',
			},
			{
				label: '用户开始',
				id: '24',
			},
			{
				label: '用户结束',
				id: '25',
			},
			{
				label: '公司确认',
				id: '26',
			}
		],
	},
	{
		label: '需求信息',
		id: '5',
	},
	{
		label: '家政员信息',
		id: '6',
		children: [
			{
				label: '编辑家政员',
				id: '16',
			}
		],
	},
	{
		label: '服务类型管理',
		id: '7',
		children: [
			{
				label: '新增服务类型',
				id: '17',
			},
			{
				label: '编辑服务类型',
				id: '18',
			}
		],
	},
	{
		label: '系统管理',
		id: '8',
		children: [
			{
				label: '资源管理',
				id: '19',
			},
			{
				label: '权限管理',
				id: '20',
			}
		],
	},
	{
		label: '添加家政员',
		id: '9',
	},
	{
		label: '地址簿',
		id: '10',
	},
	{
		label: '发布需求',
		id: '11',
	},
];

const permiss = usePermissStore();

const tree = ref<InstanceType<typeof ElTree>>();

const selectedRole = ref('1');
const handleChange = async (val: string) => {
	selectedRole.value = val;
	const res = await getResourceListByRoleApi(val);
	tree.value!.setCheckedKeys(res.data.map((item: { id: any; }) => item.id + ''));
};
handleChange('1');

const selectedKeys = ref([]);
const handleCheck = (data: any, current: any, halfCheckedNodes: any, halfCheckedKeys: any ) => {
	selectedKeys.value = current.checkedKeys;
};

// 保存权限
const onSubmit = async () => {
	const res = await updateRoleResource({roleId: selectedRole.value, resourceIdList: selectedKeys.value});
	if (res) {
		ElMessage.success("操作成功");
	}
};

</script>

<style scoped>
.tree-wrapper {
	max-width: 500px;
}
.label {
	font-size: 14px;
}
</style>
